// 药房管理
<template comments>
  <div class="pharmacy">
    <TopManu :signOut="true" @handleQuit="$router.go(-1)"></TopManu>

    <div class="search">
      <div class="s1">
        <el-input v-model="params.keyword" placeholder="请输入名称"></el-input>
        <el-button @click="searchB()">查询</el-button>
      </div>
      <div class="selectBai">


        <div>

          <!-- <el-date-picker
            @change="searchB"
            v-model="params.start_time"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="发药时间"

          >
          </el-date-picker> -->
          <el-date-picker @change="searchB" v-model="params.start_time" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
      </div>
    </div>

    <div class="tablesB">
      <el-table v-loading="params.loading" :data="data.list" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>

        <template v-for="(item, index) in tableTitle">


          <el-table-column :width="item.width" :prop="item.prop" :label="item.label" :key="index + item">
          </el-table-column>

        </template>
        <el-table-column label="操作" v-if="type == 'mz'">
          <template slot-scope="scope">
            <el-button @click="xiangqing(scope.row.drug_id)" type="text" size="small">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination class="fenye" :background="true" :current-page="params.page" :page-size="params.limit"
          layout="prev, pager, next" @current-change="handlePagination" :total="params.pageCount">
        </el-pagination>
      </div>
    </div>
    <el-dialog :fullscreen="true" :close-on-click-modal="false" title="消耗详情" :visible.sync="changyonglog">

      <viewTitle text="消耗详情" style="font-size: 20px; margin-bottom: 20px" />
      <el-col :span="24">
        <el-date-picker @change="searchB2" v-model="params.start_time" type="datetimerange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-table :data="datalist" border>
          <el-table-column type="index" width="70" label="序号">
          </el-table-column>

          <template v-for="(item, index) in tableTitle2">


            <el-table-column :width="item.width" :prop="item.prop" :label="item.label" :key="index + item">
            </el-table-column>

          </template>

        </el-table>

        <el-pagination class="fenye" :background="true" :current-page="page" :page-size="limit"
          layout="prev, pager, next" @current-change="handlePagination2" :total="pageCount">
        </el-pagination>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changyonglog = false">取 消</el-button>

      </div>
    </el-dialog>
    <!-- //$baseBai["hospitalization"]['mz_log_list'] -->
    <!-- <el-dialog title="处方信息" :visible.sync="params.show">
            <el-table :data="cfData">


                  <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in cf_tabkeTitle">
                    <el-table-column

                    :width="item.width"
                    :prop="item.prop"
                    :label="item.label"
                    :key="index + item"
                >
                </el-table-column>
        </template>
            </el-table>
        </el-dialog> -->

  </div>
</template>

<script>
let t;

import TopManu from "@/components/TopMenu";
import { mapState, mapActions } from "vuex";
// import moment from 'moment'
import { outStatisticDetail } from "@/api/assets"
export default {
  name: "mz_log",
  data() {
    return {
      tableTitle: this.$baseBai["hospitalization"]["zy_statistics_list"],
      tableTitle2: [
        { prop: "drug.name", label: "药品名称", },
        { prop: "num", label: "数量", },
        { prop: "member", label: "患者姓名", },
        { prop: "doctor", label: "开立医生", },
        { prop: "hand_out_time", label: "发药时间", width: 180 },
        { prop: "created_at", label: "开立时间", width: 180 },
        { prop: "number", label: "处方号", },
        { prop: "patient_no", label: "门诊号" },

      ],
      params: {
        show: false,
        loading: false,
        start_time: '',
        page: 1,
        limit: 10,
        keyword: "",
        pageCount: 0,
      },
      type: '',
      data: [],
      cfData: [],
      datalist: [],
      page: 1,
      limit: 10,
      pageCount: 0,
      drug_id: '',
      changyonglog: false,
      start_time: ''
    };
  },
  components: {
    TopManu,
  },
  computed: {
    ...mapState({
      zy_statistics_list: (state) => {
        return state.admin.zy_statistics_list;
      },
      mz_statistics_list: (state) => {
        return state.admin.mz_statistics_list;
      },
    }),
  },
  mounted() {
    t = this;
    t.type = this.$route.query.type;

    //this.params.start_time = moment().format('YYYY-MM-DD')
    this.getList();
  },
  methods: {
    ...mapActions(
      ["admin/getClinic_drug_houseOutStatisticList",
        'admin/geth_pharmacyoutStatisticList'
      ]
    ),

    resetSearchB() {
      this.params = {
        loading: false,

        page: 1,
        limit: 10,
        keyword: "",
        start_time: '',
        pageCount: 0,
      };
      this.getList();
    },
    xiangqing(id) {
      this.drug_id = id
      var data = {
        drug_id: id,
        page: this.page,
        limit: this.limit,
        time: this.params.start_time ? ((this.params.start_time.toString()).replace(',', '|')).toString() : '',
      }
      outStatisticDetail(data).then(res => {
        if (res.code == 200) {
          this.datalist = res.data.list
          this.pageCount = res.data.count
        }
        this.changyonglog = true

      })
    },
    searchB() {
      t.params.page = 1;
      t.getList();
    },

    handlePagination(e) {
      t.params.page = e;
      t.getList();
    },
    searchB2() {
      t.page = 1;
      t.xiangqing(this.drug_id);
    },
    handlePagination2(e) {
      t.page = e;
      t.xiangqing(this.drug_id);
    },
    getList() {
      let d = {
        keyword: t.params.keyword,
        limit: t.params.limit,
        page: t.params.page,
        time: this.params.start_time ? ((this.params.start_time.toString()).replace(',', '|')).toString() : '',
      };
      t.data = [];
      this.params.loading = true;
      let url = this.type == 'mz' ? 'admin/getClinic_drug_houseOutStatisticList' : 'admin/geth_pharmacyoutStatisticList';
      this[url](d).then((res) => {
        this.params.loading = false;

        this.params.pageCount = this.type == 'mz' ? this.mz_statistics_list.count : this.zy_statistics_list.count;
        this.data = this.type == 'mz' ? this.mz_statistics_list : this.zy_statistics_list;
        console.log("只是数据", this.data)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav {
  .el-tabs__item {
    border-bottom: 1px solid #e4e7ed;
  }

  .is-active {
    color: #02bf6b;
  }

  .el-tabs__item:hover {
    color: #02bf6b;
  }
}

.search {
  border: 1px solid #f2f2f2;
  margin: 10px 2%;
  padding: 20px 20px 0;
  border-radius: 10px;

  .s1 {
    width: 400px;
    display: flex;

    button {
      margin-left: 20px;
      margin-bottom: 20px;
      background-color: #02bf6b;
      color: white;
    }
  }

  .selectBai {
    display: flex;

    >div {
      margin-right: 10px;
    }
  }
}

.tableMore {
  /deep/ .el-button--primary {
    color: black;
    background-color: initial;
    border-color: #e2e2e2;
  }
}

.tablesB,
.tabsB {
  margin: 20px 2% 0;
}

.fenye {
  text-align: right;
  margin-top: 20px;
  margin-bottom: 50px;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #02bf6b;
}

/deep/ .el-dialog__body {
  // height: 70vh;
  overflow: scroll;
}

/deep/ .el-table td,
.el-table th {
  padding: 8px 0;
}

/deep/ .el-dialog {
  width: 70%;
}
</style>
